<template>
  <div class="login_bg">
    <el-form ref="loginForm" :model="loginForm" label-width="80px" class="login_form">
      <h3>登录博客系统</h3>
      <el-form-item label="用户名">
        <el-input
            v-model="loginForm.username"
            type="text"
            autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input
            v-model="loginForm.password"
            type="password"
            autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label-width="0xp">
        <el-button type="primary" @click="login">登录</el-button>
        <el-button @click="$router.replace('/register')">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: "",
        password: ""
      }

    }
  },
  methods: {

    login() {
      let _this = this
      this.$axios.post('login', {
        username: this.loginForm.username,
        password: this.loginForm.password
      }).then(success => {
        if (success.data.code === 200) {
          _this.$store.commit('login', success.data.data)
          alert("欢迎" + success.data.data.nickname)
          console.log(_this.query);
          _this.$router.replace(_this.$route.query.redirect || '/home')
        } else {
          alert(success.data.message)
        }
      }).catch(fail => {
        console.log(fail)
      })
    }
  }
}
</script>

<style scoped>
.login_form {
  border-radius: 20px;
  background-clip: padding-box;
  margin: 90px auto;
  width: 370px;
  padding: 35px;
  background: white;
  border: 1px solid darkgray;
  box-shadow: 0 0 25px gray;
}

.login_bg {
  background: url("../assets/spider-man.jpg") center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}
</style>